<template>
    <card-home 
    :body-height="bodyHeight" 
    icon="/images/home/jundui.png"
    >
        <template #header-prepend>
            <div class="tab">
                <div 
                class="item"
                v-for="(item, index) in tab"
                :key="index"
                :class="{active: item.code === current}"
                @click="tabClickHandler(item)"
                >
                    {{item.title}}
                </div>
            </div>
        </template>

        <follow-project 
            v-show="current === 'project'"
            :pagesize="3"
        ></follow-project>

        <follow-business 
            v-show="current === 'business'"
            :pagesize="2"
        ></follow-business>
    </card-home>
</template>

<script>
import FollowProject from '@/pages/application/info/section/follow/components/project.vue';
import FollowBusiness from '@/pages/application/info/section/follow/components/business.vue';

import CardHome from '../../components/card-home.vue';

export default {
    components: {
        FollowProject,
        FollowBusiness,
        CardHome,
    },
    props: {
        bodyHeight: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            tab: [
                {
                    title: '监控的项目',
                    code: 'project',
                },
                {
                    title: '监控的企业',
                    code: 'business',
                },
            ],

            current: 'project',
        }
    },
    methods: {
        tabClickHandler(item) {
            this.current = item.code;
        },
    }
}
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';  

    .tab{
        display: flex;
        font-size: 16px;

        .item{
            color: #C0C4CC ;
            font-weight: bold;
            cursor: pointer;
            position: relative;

            &.active{
                color: #2d2d2d;
            }

            & + .item{
                margin-left: 14px;

                &:before{
                    content: '';
                    display: block;
                    background-color: #2d2d2d;
                    width: 2px;
                    height: 60%;
                    position: absolute;
                    top: 50%;
                    left: -8px;
                    transform: translateY(-50%);
                }
            }
        }
    }
</style>